Pseudo-elements like ::before and ::after behave like child elements of their parent in terms of layout and rendering. Therefore, their interaction with display and overflow properties follows standard CSS rules.

Key Points

1
The display property of a pseudo-element determines how it is rendered (e.g., block, inline, inline-block). By default, ::before and ::after are inline elements unless specified otherwise.
2
Pseudo-elements respect overflow settings of their parent. If the parent has overflow: hidden, any portion of the pseudo-element that extends outside the parent's box will be clipped.
3
You can also set overflow directly on pseudo-elements if they have block or inline-block display and defined dimensions.
4
For positioning pseudo-elements absolutely or relatively, the parent's position affects how they are placed within the stacking context.

Example: Pseudo-Element with Display and Overflow

In this example, the ::before pseudo-element is a block element wider than its parent. Because the parent has overflow: hidden, the extra width is clipped, demonstrating how overflow affects pseudo-elements.

Best Practices

1
Explicitly define display for pseudo-elements to control layout behavior.
2
Use overflow carefully on parent elements to manage clipping of pseudo-elements.
3
Combine with position and z-index for advanced visual effects.
4
Test across different browsers, as pseudo-element rendering may vary slightly in edge cases.

Difficulty: 6/10

Topics: pseudo-elements, display property, overflow containment

Scenario Questions

0-2 years experience

1
You're trying to add a decorative arrow using ::after on a button, but it's not showing up — the button has overflow: hidden. What’s likely causing this and how would you fix it?
2
If you set display: none on a ::before pseudo-element, will it still affect the layout of its parent? Why or why not?
3
You added a ::after element with width: 100px and overflow: hidden, but the content inside it isn’t being clipped. What’s the most common reason?

2-5 years experience

1
A tooltip component uses ::before for the arrow, but when the parent has overflow: hidden, the arrow gets cut off — how would you debug and fix this without changing the parent’s overflow?
2
A team member used ::after to create a badge inside a card with display: flex and overflow: hidden, but the badge is invisible. What’s the likely root cause, and what display values would you try to resolve it?
3
We have a carousel with overflow: hidden on the container, and we’re using ::before to draw a gradient overlay — it’s not rendering. What CSS properties might be conflicting, and how would you verify your hypothesis?

5-8 years experience

1
You’re designing a reusable card component that supports dynamic content and needs a ::before overlay for hover effects — how do you ensure the overlay respects overflow: hidden on the card without breaking layout or accessibility when used in different contexts?
2
A legacy component uses pseudo-elements for visual decorations inside scrollable containers, but users report clipping issues on mobile. How would you audit and refactor this to be robust across display contexts and viewport sizes?
3
In a design system, pseudo-elements are used for icons and indicators inside components with varying overflow behaviors. How would you document and enforce correct usage to prevent layout breaks across 50+ components?

8+ years experience

1
Our design system relies heavily on pseudo-elements for visual enhancements in a component library used across 20+ products — how would you architect a testing and linting strategy to catch overflow/display misuses before they ship?
2
We’re migrating from legacy CSS to a CSS-in-JS system, and pseudo-elements are being injected via JS — how do you ensure overflow and display behavior remains consistent without direct CSS control, and what tradeoffs do you accept?
3
A cross-team component is breaking in edge cases where pseudo-elements interact with overflow: clip and display: contents — how do you drive alignment across teams on expected behavior, and when do you push back on using pseudo-elements for critical layout?

Follow-up Questions

❓What happens if you set display: flex on the parent but try to use ::before with display: block?
❓Can you use overflow: hidden on a pseudo-element to clip its own content?
❓Why might a ::after element not respond to overflow: scroll even when it has content?